<template>
  <header class="signup">
    <div class="background-image-holder" :style="bgStyle"></div>
    <div class="container">
      <div class="row">
        <div class="col-md-10 col-sm-12 text-center">
          <h1 class="text-white">
            {{ t('connect') }}
            <span>
              {{ t('unconnect') }}
            </span>
          </h1>
          <h3 class="text-white">
            {{ t('simple') }}
            <br>
            {{ t('collection') }}
          </h3>
        </div>
      </div>
      <div class="row text-center">
        <div class="text-center col-sm-10 col-sm-offset-1"></div>
      </div>
    </div>
  </header>
</template>

<script lang="ts">
  /** lib **/
  import {
    useI18n
  } from 'vue-i18n'
  /** components **/
  import bSkeleton from '../../../../components/bSkeleton.vue'
  /** logic **/
  import useImgLoading from './img-loading' // useImgLoading
  export default {
    components: {
      bSkeleton
    },
    setup(props: any, context: any) {
      return {
        ...useImgLoading(),
        ...useI18n({
          inheritLocale: true
        })
      }
    }
  }
</script>

<i18n>
  {
  "zh":{
  "connect": "连接",
  "unconnect":"不可能。",
  "simple":"一个简单的端到端连接解决方案,",
  "collection":"从数据收集到发布到仪表板或API。"
  },
  "en": {
  "connect": "Connecting the",
  "unconnect":"unconnected.",
  "simple":"A simple end-to-end connectivity solution,",
  "collection":"from collection of data to publication into dashboards or APIs."
  },
  "ja": {
  "connect": "接続する",
  "unconnect":"せつぞくふのう.",
  "simple":"簡単なエンドツーエンド接続ソリューション,",
  "collection":"データの収集からダッシュボードまたはAPIへの出版。"
  }
  }
</i18n>

<style scoped>
  header.signup {
    padding: 140px 0px 20px 0;
    position: relative;
    overflow: hidden;
    height: auto;
  }

  header.signup h1 {
    font-size: 32px;
    line-height: 40px;
  }

  header.signup h1 {
    font-weight: 600;
    font-size: 40px;
    line-height: 56px;
    margin-bottom: 20px;
  }

  header.signup h1 span {
    font-family: OpenSans-Semibold;
    color: #1FCC6E;
  }

  header.signup h3 {
    font-weight: 300;
    font-size: 25px;
    line-height: 42px;
    margin-bottom: 20px;
  }

  .text-white {
    color: #fff;
  }

  header .container {
    position: relative;
    z-index: 3;
    margin-bottom: 80px;
    margin-top: 40px;
  }

  .background-image-holder {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 90%;
    background-repeat: no-repeat;
  }

  .row {
    margin-left: -15px;
    margin-right: -15px;
  }

  .col-sm-12 {
    width: 100%;
  }
</style>